<template>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator="/" class="custom-breadcrumb">
        <el-breadcrumb-item><span class="breadcrumb-strong">首页</span></el-breadcrumb-item>
        <el-breadcrumb-item><span class="breadcrumb-strong">流程引擎</span></el-breadcrumb-item>
        <el-breadcrumb-item>表单节点管理</el-breadcrumb-item>
    </el-breadcrumb>

    <el-card>
        <!-- 节点查询 -->
        节点名称：
        <el-input placeholder="请输入节点名称" style="width: 200px;" v-model="formNodesqueryInfo.NodeName"></el-input>
        &nbsp;
        所属表单：
        <el-select placeholder="请选择表单" v-model="formNodesqueryInfo.FormId" style="width: 150px;">
            <el-option label="请选择表单"></el-option>
            <el-option v-for="item in formData" :value="item.FormId" :label=item.FormName>{{ item.FormName
            }}</el-option>
        </el-select>
        所属表单分类：
        <el-select placeholder="请选择表单分类" v-model="formNodesqueryInfo.FormTypeId" style="width: 150px;">
            <el-option label="请选择表单分类"></el-option>
            <el-option v-for="item in formTypeDropData" :value="item.TypeId" :label=item.TypeName>{{ item.TypeName
            }}</el-option>
        </el-select>
        <br>





        <el-button @click="formNodesShowList" type="primary" style="margin: 20px;">查询</el-button>
        &nbsp;
        <el-button @click="Resert" type="danger">重置</el-button>
    </el-card>

    <br>
    <br>

    <el-card>




        <!-- 节点列表 -->
        <el-table :data="FormNodeInfoList.pageData" style="width: 100%; margin: 30px;">
            <el-table-column fixed type="index" label="序号" width="150" />
            <el-table-column prop="NodeNo" label="节点编号" />
            <el-table-column prop="NodeName" label="节点名称" />
            <el-table-column prop="PrevNodeName" label="上级节点名称" />
            <el-table-column prop="NextNodeName" label="下级节点名称" />
            <el-table-column prop="FormName" label="表单名称" />
            <el-table-column prop="TypeName" label="分类名称" />

            <el-table-column fixed="right" label="操作列" min-width="120">
                <template #default="scope">
                    <el-button link type="primary" size="small" @click="formNodesDel(scope.row.NodeId)">
                        删除
                    </el-button>
                    <el-button link type="primary" size="small" @click="">修改</el-button>
                </template>
            </el-table-column>
        </el-table>
    </el-card>

    <Pagination :current-page="formNodesqueryInfo.PageIndex" :page-size="formNodesqueryInfo.PageSize"
        :total-count="FormNodeInfoList.TotalCount" :total-page="FormNodeInfoList.TotalPage"
        @size-change="handleSizeChange" @current-change="handleCurrentChange">
    </Pagination>



</template>

<script lang="ts" setup>
import axios from 'axios';
import { ref, reactive, onMounted, watch } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus'
import { type FormInstance, type FormRules } from 'element-plus'

import Pagination from '@/components/Pagination.vue'

import { GetFromNode, DeleteFromNode, UpdateFromNode, AddFromNode } from '@/api/formNode'//引入表单节点管理

import { getFormList } from '@/api/formInfo'//引入表单管理

import { GetFormTypeList } from '@/api/formType'//引入表单分类管理


//定义表单类型下拉框数据的接口
interface FormTypeDropData {
    TypeId: string
    TypeName: number
}

//定义表单数据的接口
interface FormDropData {
    FormId: number
    FormName: string
}


//定义表单数据的数组
const formData = ref<FormDropData[]>([]);
//定义表单分类下拉框数据
const formTypeDropData = ref<FormTypeDropData[]>([])



//表单分类下拉框
const getformTyprList = async () => {

    const res = await GetFormTypeList();

    console.log(res);

    formTypeDropData.value = res.data.Result
}

//获取表单数据
const getFormData = async () => {
    const res = await getFormList(0)
    console.log(res);
    formData.value = res.data.Result
}


const resetForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.resetFields()
}



/*const FromTypeSelect = async () => {
    const res = await GetGirdList({

    });
    console.log(res)
    FromTypeSel.value = res.data.Result;
}*/


//节点列表
const FormNodeInfoList = reactive({
    TotalCount: 0,
    TotalPage: 0,
    pageData: []
});

const formNodesqueryInfo = reactive({
    FormTypeId: null,
    FormId: null,
    NodeName: '',
    PageIndex: 1,
    PageSize: 3
})

//表单节点数据列表
const formNodesShowList = async () => {
    console.log(formNodesqueryInfo);

    const res = await GetFromNode({
        FormTypeId: formNodesqueryInfo.FormTypeId,
        FormId: formNodesqueryInfo.FormId,
        NodeName: formNodesqueryInfo.NodeName,
        PageIndex: formNodesqueryInfo.PageIndex,
        PageSize: formNodesqueryInfo.PageSize
    })

    console.log(res);

    FormNodeInfoList.pageData = res.data.Result.Data;
    FormNodeInfoList.TotalCount = res.data.Result.TotalCount;
    FormNodeInfoList.TotalPage = res.data.Result.TotalPage;

}

//查询条件重置按钮
const Resert = () => {
    formNodesqueryInfo.FormId = null;
    formNodesqueryInfo.FormTypeId = null;
    formNodesqueryInfo.NodeName = '';

    formNodesShowList();
}

//表单分页
const handleSizeChange = (val: number) => {
    console.log(`${val} items per page`)
    formNodesqueryInfo.PageSize = val;
    formNodesShowList();
}
const handleCurrentChange = (val: number) => {
    console.log(`current page: ${val}`)
    formNodesqueryInfo.PageIndex = val;
    formNodesShowList();
}

//节点删除
const formNodesDel = (id: any) => {
    ElMessageBox.confirm(
        '您确定要删除嘛?',
        '警告',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(async () => {
            await DeleteFromNode(id);
            ElMessage.success('删除成功')
            formNodesShowList();
        })
        .catch(() => {
            ElMessage({
                type: 'info',
                message: '操作已取消',
            })
        })
}


//监听分页数据
watch(formNodesqueryInfo, () => {
    formNodesShowList();
}, { deep: true })

//生命周期钩子函数
onMounted(() => {
    getFormData();
    getformTyprList();
    formNodesShowList();
    //FromTypeSelect();
})
</script>

<style scoped>
.custom-breadcrumb {
    margin-bottom: 18px;
    font-size: 17px;
}

.breadcrumb-strong {
    font-weight: bold;
}

.main-nav-links {
    width: 100%;
    background: #f6fcff;
    border-bottom: 1px solid #e4e7ed;
    padding: 0 32px;
    height: 44px;
    display: flex;
    align-items: center;
    gap: 32px;
    margin-bottom: 18px;
    box-sizing: border-box;
    justify-content: space-between;
}

.main-link {
    flex: 1;
    text-align: center;
    color: #337ecc;
    font-size: 15px;
    text-decoration: none;
    padding: 0 8px;
    line-height: 44px;
    transition: color 0.2s;
}

.main-link:hover {
    color: #409eff;
    text-decoration: underline;
}

.main-link-active {
    color: #409eff;
    font-weight: bold;
    border-bottom: 2px solid #409eff;
}
</style>